<template>
  <div class="main">
    <h3>模板语法-属性</h3>
    <button :disabled="isDisabled" @click="changeId">改变isTrue的值</button>
    <button :disabled="isDisabled" @click="changeBindId">改变bindId的值</button>
    <div id="commonId">正常绑定id属性</div>
    <div v-bind:id="bindId">使用v-bind指令绑定id属性</div>
    <div v-bind:id="isTrue ? bindId : 'commonId'">使用v-bind指令改变id</div>
    <button @click="isDisabled = !isDisabled">
      改变上边两个button的disabled属性用来是否禁用按钮
    </button>

    <hr />
    <h4>绑定多个属性:</h4>
    <div v-bind="objectofAttrs">我是一个绑定了多个属性的div</div>

    <h4>可以在绑定的表达式中使用一个组件暴露的方法：</h4>
    <div :id="returnJoinStr()" :class="returnJoinStr()">{{ returnJoinStr() }}</div>

    <h4>暴露的常用内置全局对象</h4>
    <div>
      const GLOBALS_ALLOWED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,'
      + 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
      'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol'
    </div>

    <h4>指令</h4>
    <p v-if="isTrue">我是if指令控制的</p>

    <h4>参数Arguments</h4>
    <p>
      某些指令会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用 v-bind
      指令来响应式地更新一个 HTML attribute:

      <a href="http://www.baidu.com"> 跳转百度 </a>
      <a :href="`http://www.baidu.com/s?wd=${keywords}`">在百度搜索国足</a>
      <img :src="`/src/assets/images/${imgStr}.jpg`" @click="imgStr = 8" width="500" />
    </p>

    <hr />

    <h2>动态参数</h2>
    <h4>同样在指令参数上也可以使用一个js表达式, 需要包含在一对方括号内:</h4>
    <div>
      <a v-bind:[attributeName]="`http://www.baidu.com`"> 链接1 </a>
      <a :[attributeDataName]="'dataa'" v-bind:[attributeName]="`http://www.baidu.com`"> 链接2 </a>

      <a @[eventName]="() => console.log('a 链接动态绑定事件')"> a链接动态绑定事件3 </a>

      <a :[`${attributeDataName}-foo`]="'dataa'" v-bind:[attributeName]="`http://www.baidu.com`"> 链接4
        (`{{ attributeDataName }}-foo`) </a>

    </div>

    <hr>
    <!-- // .once 只执行一次 -->
    <div class="outer" @click.once="() => { console.log('outer被点击了') }">
      <div class="inner" @click="(event) => {
        console.log('inner被点击了')
        event.stopPropagation()
      }">
        <div class="child" @click="(event) => {
          // console.log(event)
          // 阻止事件冒泡，防止父组件接收到子组件触发的事件。确保点击子组件时，不会触发父组件的事件处理函数。
          event.stopPropagation()
          console.log('child 被点击了');
        }">

        </div>
      </div>
    </div>

    <hr>

    <form action="http://www.baidu.com/s">
      <input type="text" name="wd" id="">
      <button type="submit" @click.prevent="() => console.log('跳转到百度')">表单提交</button>
    </form>

    <hr />

    <div>
      <div>Current Count: {{ counterStore.count }}</div>
      <div>Current doubleCount: {{ counterStore.doubleCount }}</div>
      <button type="button" @click="counterStore.increment">counterStore.count++</button>
      <div>ref: {{ cr }}</div>
      <button type="button" @click="cr++">ref:cr++</button>
    </div>

  </div>
</template>

<script lang="ts">
export default {
  name: 'diyDemo22'
}
</script>

<script setup lang="ts">
import { ref } from 'vue'

import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
const cr = ref(0)

const bindId = ref('stuId')
console.log('bindId: ', bindId.value)

let attributeName = 'href'
let attributeDataName = 'data-a'
let eventName = 'click'

const isDisabled = ref(false)

const isTrue = ref(false)
console.log('isTrue: ', isTrue.value)

// 用于绑定多个属性
const objectofAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

let keywords = '国足'

const imgStr = ref(5)

function changeId() {
  isTrue.value = !isTrue.value
  console.log('isTrue:', isTrue.value)
}

function changeBindId() {
  bindId.value = 'commonId'
  console.log('bindId:', bindId.value)
}

function returnJoinStr() {
  let arr3 = ['Stu', 'ui']
  return arr3.join('_')
}
</script>

<style lang="scss" scoped>
.main {
  margin-bottom: 300px;
}

h3 {
  text-align: center;
}

#commonId {
  color: brown;
}

#stuId {
  color: blueviolet;
}

.outer {
  height: 500px;
  width: 500px;
  background-color: blueviolet;

  .inner {
    width: 300px;
    height: 300px;
    background-color: skyblue;

    .child {
      width: 100px;
      height: 100px;
      background-color: burlywood;
    }
  }
}
</style>
